<script>

  /**局部组件的使用 */
  import BasicCommand from "./BasicCommand.vue";
  import parent from "./Parent.vue";
  import SlotaCom from "./SlotaCom.vue";
  import LocalComDemo from "./LocalComDemo.vue";
  import GlobalComDemo from "./GlobalComDemo.vue";
  import Father from "./Father.vue";
  import SlotNameCom from "./SlotNameCom.vue";
  import VueBasicinfo from "./VueBasicinfo.vue";

  export default {
    props:{
      msg:""
    },
    data(){
      return {
        titleMsg:"我是国服adcUzi"
      }
    },
    components:{
    GlobalComDemo,
    BasicCommand,
    LocalComDemo,
    parent,
    SlotaCom,
    Father,
    SlotNameCom,
    VueBasicinfo
}
  }
</script>
<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>


    <!-- <basicCommand />
    <GlobalComDemo />
    <LocalComDemo />



    <h1>父子通信</h1>
    <Parent />

    <h1>插槽</h1>

    <SlotCom> 
      <p>这是父组件得内容</p>
    </SlotCom>


    <div class="SlotNameComclass">
      <SlotNameCom>
      <template v-slot:hearder>
          父组件传入的内容
      </template>

      <template v-slot:footer>
        父组件传入的内容---footer
      </template>
    </SlotNameCom>
    </div>



    <Father /> -->

    <VueBasicinfo :title="titleMsg"></VueBasicinfo>



  </div>
</template>

<style>
h1{
  font-weight: 500;
  font-size: 20px;
  position: relative;
  top: -10px;
}

.SlotNameComclass{
  color: deeppink;
  font-size: 30px;
}
</style>